import React,{useState} from 'react'
import './qylxr.css'
import {Table} from 'antd';
import { Pagination } from 'antd';
import { Select, Space,Checkbox,Input,Button,Modal,Switch  } from 'antd';
export default function QYLXR() {
  let data=[
    {
      key:1,
      name:'北京西天取经科技有限公司',
      cont1:'-',
      cont2:'-',
      cont3:'-',
      peo:'张三',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'行政',
    },
    {
      key:2,
      name:'华采科技(北京)有限公司',
      cont1:'是',
      cont2:'是',
      cont3:'是',
      peo:'李四',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'总经理',
    },
    {
      key:3,
      name:'百度网络科技有限公司',
      cont1:'-',
      cont2:'是',
      cont3:'-',
      peo:'王五',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'产品经理',
    }
  ]
  let col=[
    {
        title: '商品名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '有未开始的租期',
        dataIndex: 'cont1',
        key: 'cont1',
    },
    {
      title: '租期进行中',
      dataIndex: 'cont2',
      key: 'cont2',
    },
    {
      title: '有已结束的租期',
      dataIndex: 'cont3',
      key: 'cont3',
    },
    {
      title: '联系人',
      dataIndex: 'peo',
      key: 'peo',
    },
    {
      title: '联系人手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '联系人邮箱',
      dataIndex: 'com',
      key: 'com',
    },
    {
      title: '联系人职务',
      dataIndex: 'job',
      key: 'job',
    },
    {
        title:'操作',
        dataIndex:'action',
        //参数 record 指的是当前整行数据对象
        render(_,record){
        return    <div>
                <p>设置联系人</p>
            </div>
        }
    }
];
const [isModalOpen, setIsModalOpen] = useState(false);
const showModal = () => {
    setIsModalOpen(true);
};
const handleOk = () => {
    setIsModalOpen(false);
};
const handleCancel = () => {
    setIsModalOpen(false);
};

const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  return (
    <>
    <div className='qylxr'>
        <h2>签约联系人</h2>
        <div className="cont">
          <div className="inp"><input type="text" placeholder='请输入客户名称'/></div>
          <div className="zqzt">
            <p>租期状态</p>
            <div className="box">
              <div>
                <input type="checkbox"/>
                <span>有未开始的租期</span>
              </div>
              <div>
                <input type="checkbox"/>
                <span>租期进行中</span>
              </div>
              <div>
                <input type="checkbox"/>
                <span>有已结束的租期</span>
              </div>
            </div>
          </div>
          <div className="txt">
              <p>联系人姓名或手机号</p>
              <input type="text"/>
          </div>
          <Button>查询</Button>
          <Button onClick={showModal}>重置</Button>
        </div>
        <div className="cont1">
          <Table 
            dataSource={data}
            columns={col}
            // pagination={{
            //     position:['bottomLeft']
            // }}
          />
          <Pagination size="small" total={50} showSizeChanger showQuickJumper />
        </div>


        <Modal title="设置签约联系人" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={'取消'} okText={'保存'}>
          <div className="addNew">
              <div className='floor'>
                <div className='qylxr-name'>
                  <p><span>* </span> 联系人姓名</p>
                  <Input type="text" placeholder='请输入联系人姓名' value=""/>
                </div>
                <div className='qylxr-phone'>
                  <p><span class="m">*</span>联系人手机号</p>
                  <div>
                        <Select
                            defaultValue="中国+86"
                            style={{
                                width: 73,
                                height:36
                            }}
                            onChange={handleChange}
                        />
                        <Input placeholder='请输入'/>
                  </div>
                </div>
              </div>
              <div className='qylxr-footer'>
              <div >
                  <span>联系人邮箱</span>
                  <Input placeholder='请输入联系人邮箱'/>
              </div>
              <div>
                  <span>联系人职务</span>
                  <Input placeholder='请输入联系人职务'/>
              </div>
              </div>
          </div>
        </Modal>
       
      </div>
    </>
  )
}
